<template>
  <u-popup :show="isShow" round="8" @close="onClose">
    <view>
      <view
        style="
          padding: 0 12px;
          margin-top: 16px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <text style="font-size: 15px">矩形样式</text>
        <u-icon
          name="checkbox-mark"
          size="28"
          @click="confirm"
          style="margin-left: 12px"
        ></u-icon>
      </view>
      <t-color-picker
        @setColor="setColor"
        :color="getRgbaColor"
        ref="colorPicker"
      ></t-color-picker>
    </view>
  </u-popup>
</template>
<script>
import tColorPicker from "@/components/t-color-picker/t-color-picker.vue";
export default {
  data() {
    return {
      shape: {
        backgroundColor: "#686D72",
        width: 50,
        height: 50,
        borderStyle: "solid",
        borderWidth: 1,
        borderColor: "#fff",
        radius: 2,
        width: 50,
        height: 50,
      },
    };
  },
  components: {
    tColorPicker,
  },
  props: {
    isShow: {
      type: Boolean,
    },
    shapeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    setShape() {
      // console.log('setFont -> this.fontData', this.fontData);
      return this.shapeData;
    },
    getRgbaColor() {
      let hexColor = this.shape.backgroundColor.slice(1);

      // 解析RGB部分
      var r = parseInt(hexColor.slice(0, 2), 16);
      var g = parseInt(hexColor.slice(2, 4), 16);
      var b = parseInt(hexColor.slice(4), 16);
      return {
        r,
        g,
        b,
        a: 1,
      };
    },
  },
  methods: {
    onClose() {
      this.$emit("cancel");
    },
    setColor(value) {
      this.shape.backgroundColor = value;
    },
    confirm() {
      this.shape.backgroundColor = this.$refs.colorPicker.hex;
      this.$emit("confirm", {
        ...this.shape,
      });
    },
  },
  watch: {
    setShape: {
      handler(val) {
        // console.log('handler -> val', val);//
        this.shape = Object.assign(
          {
            backgroundColor: "#686D72",
            width: 50,
            height: 50,
            borderStyle: "solid",
            borderWidth: 1,
            borderColor: "#fff",
            radius: 2,
            width: 50,
            height: 50,
          },
          val
        );
      },
      deep: true,
    },
  },
};
</script>
